<template>
	<div class="container">
		<el-page-header @back="goBack" content="管理员列表"></el-page-header>

		<el-radio-group v-model="dataType" class="e-m-t-45">
			<el-radio-button label="0">PC端管理员设置</el-radio-button>
			<el-radio-button label="1">小程序端看数据权限</el-radio-button>
		</el-radio-group>

		<el-row type="flex" justify="space-between" class="e-m-t-45">
			<el-col :span="3" class="buttonList">
				<el-button type="primary" @click="create">新建</el-button>
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="关键字">
						<el-input placeholder="请输入" v-model="key" prefix-icon="el-icon-search"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<!-- <el-divider></el-divider> -->
		<!-- <el-row type="flex" justify="space-between" class="nav-bar e-m-b-20">
			<el-col :span="3">
				<el-button type="primary" @click="create" icon="el-icon-plus" size="small">新增</el-button>
			</el-col>
			<el-col class="text-right">
				<el-button type="primary" plain icon="el-icon-upload2" size="small">导入</el-button>
				<el-button plain icon="el-icon-download" size="small">下载</el-button>
			</el-col>
		</el-row> -->
		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed type="index" width="50">
			</el-table-column>
			<el-table-column fixed label="用户名称">
				<template slot-scope="scope">
					<div class="user-face">
						<div class="avatar">
							<el-avatar :src="fileURL + scope.row.photo" :size="40"></el-avatar>
							<i class="iconfont icon-nan male" v-if="scope.row.sex == '男'"></i>
							<i class="iconfont icon-nv female" v-else></i>
						</div>
						<div class="name e-p-l-15">{{ scope.row.name }}</div>
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="typeuser" label="用户类型" width="150">
			</el-table-column>
			<el-table-column prop="enterprisename" label="性别" width="150">
			</el-table-column> -->
			<el-table-column prop="email" label="邮箱" width="180">
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" width="150">
			</el-table-column>
			<el-table-column prop="sex" label="性别" width="100">
			</el-table-column>

			<el-table-column prop="lastlogindatetime" label="注册时间" width="150">
			</el-table-column>
			<el-table-column prop="usestate" label="账号状态" width="100">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已启用' || scope.row.state == '2'">已启用</span>
					<span class="color-danger" v-if="scope.row.state == '已冻结' || scope.row.state == '1'">已冻结</span>
				</template>
			</el-table-column>
			<el-table-column prop="usestate" label="接受短信" width="100">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.sendmsg === true">是</span>
					<span class="color-danger" v-if="scope.row.sendmsg === false">否</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="recoverytime" label="登录时间" width="150">
			</el-table-column> -->
			<!-- <el-table-column prop="number" label="状态" width="150">
			</el-table-column> -->
			<el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button @click="views(scope.row)" type="text" size="small">查看</el-button>
					<el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
					<!-- <el-button @click="mydelete(scope.row)" type="text" size="small">删除</el-button> -->
					<el-button type="text" @click='pawsss(scope.row)' size="small">重置密码</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<el-dialog :title="dialogType == 'add' ? '新建' : '编辑'" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item v-if="dialogType == 'add'" label="密码">
					<el-input v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item label="手机号码">
					<el-input v-model="form.mobile"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="form.sex" placeholder="请选择活动区域">
						<el-option label="女" value="女"></el-option>
						<el-option label="男" value="男"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账户状态">
					<el-radio-group v-model="form.state">
						<el-radio label="1">已冻结</el-radio>
						<el-radio label="2">已启用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否短信接收">
					<el-radio-group v-model="form.sendmsg">
						<el-radio label="false">否</el-radio>
						<el-radio label="true">是</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="相片">
					<cropper-upload :zoomScale='[1, 1]' :isCropper="true" @getUpload="handleFilesSuccess"
						class="avatar-uploader">
						<img v-if="form.photo" :src="fileURL + form.photo" class="avatar">
						<div class="avatar-uploader-icon" v-else>
							<div><i class="el-icon-plus"></i></div>
							<div class="e-font-14">上传图片</div>
						</div>
					</cropper-upload>

					<div class="tips e-p-t-10">建议上传尺寸比例为200*200 </div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitType('form')">确定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="管理员详情" :visible.sync="dialogVisible1" width="800px">
			<el-descriptions :column="2" border :labelStyle="{ width: '130px' }" title="">
				<!-- <template slot="extra">
					<el-button type="primary" size="small">编辑</el-button>
				</template> -->
				<el-descriptions-item>
					<template slot="label">
						我的名称
					</template>
					{{ form.name }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						性别
					</template>
					{{ form.sex }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						手机号码
					</template>
					{{ form.mobile }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						电子邮箱
					</template>
					{{ form.email }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						状态
					</template>
					{{ form.state }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						头像
					</template>
					<el-image style="width: 100px; height: 100px" :src="fileURL + form.photo"
						:preview-src-list="[fileURL + form.photo]">
						>
					</el-image>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
		<el-dialog title="重置密码" :visible.sync="dialogVisible2" width="500px">
			<el-form ref="form" :model="form" label-width="140px">
				<el-form-item label="姓名">
					<el-input disabled v-model="pform.name"></el-input>
				</el-form-item>
				<el-form-item label="新密码">
					<el-input v-model="pform.newPass"></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="pform.againPass"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取消</el-button>
				<el-button type="primary" @click="submitP">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
		return {
			title: '用户信息-' + this.websetting.name
		}
	},
	data() {
		return {
			rules: {
				name: [
					// {required: true, message: '请输入标题'},
					{ required: true, validator: this.titleTest },
					{ min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
				],
			},
			loading: true,
			key: '',
			page: 1,
			pageSize: 10,
			total: 0,
			dialogVisible: false,//编辑新建
			dialogVisible1: false,//详情
			dialogVisible2: false,//重置密码
			dialogType: 'add',
			form: {
				id: "",
				password: '',
				name: '',
				mobile: '',
				sort: 0,
				state: '2',
				sendmsg: "false",
				sex: "男",
				email: "",
				photo: ''
			},
			tableData: [],
			pform: {
				name: "",
				id: 0,
				newPass: "",
				againPass: ""
			},
			dataType: 0
		}
	},
	watch: {
		dataType(val) {
			if (val == 0) {
				this.$router.push({
					path: '/admin/setting/uselist'
				})
			} else if (val == 1) {
				this.$router.push({
					path: '/admin/setting/boardUser'
				})
			} 
		},
		dialogVisible2(value) {
			if (!value) {
				this.pform = {
					name: "",
					id: 0,
					newPass: "",
					againPass: ""
				}
			}

		},
		dialogVisible(value) {
			if (!value) {
				this.form = {
					id: "",
					password: '',
					name: '',
					mobile: '',
					sort: 0,
					state: '1',
					sex: "男",
					email: "",
					photo: ''
				}
			}
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		mydelete(row) {
			this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.post(`/Admin/delete`, { id: row.id }).then(res => {
					console.log(res)
					// this.form = res
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.getList()
				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});


		},
		titleTest(rule, value, callback) {
			// console.log(value)
			// const title= /^[\u0391-\uFFE5A-Za-z]+$/
			const title = /^[\a-\z\A-\Z0-9\u4e00-\u9fe5]+$/
			if (!title.test(value)) {
				callback(new Error('标题只能输入中文、数字和英文'))
			} else {
				callback()
			}
		},
		submitP() {
			this.$axios.post('/Admin/ResetPass', this.pform).then((res) => {
				console.log(res)
				this.$message.success("密码已重置");
				this.dialogVisible2 = false

			})
		},
		pawsss(row) {
			console.log(row)
			this.pform.name = row.name
			this.pform.id = row.id

			this.dialogVisible2 = true



		},
		// 编辑
		edit(row) {
			// this.form = row
			this.form.name = row.name
				this.form.id = row.id
				this.form.password = row.password
				this.form.mobile = row.mobile
				this.form.sort = row.sort
				this.form.sex = row.sex
				this.form.email = row.email
				this.form.photo = row.photo


			if (row.state == "已冻结") {
				row.state = '1'
			} else {
				row.state = '2'

			}
			if (!row.sendmsg) {
				this.form.sendmsg = 'false'
			} else {
				this.form.sendmsg= 'true'

			}

			console.log(row)
			this.dialogType = "edit"
			this.dialogVisible = true
		},
		submitType(formName) {
			let api = ''
			if (this.dialogType == 'add') {
				api = '/Admin/create'
			}
			if (this.dialogType == 'edit') {
				api = '/Admin/edit'
			}
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$axios.post(api, this.form).then((res) => {
						// this.$message.success(res.msg);
						this.$message.success("提交成功");

						this.dialogVisible = false;
						this.getList()
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		},
		handleFilesSuccess(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.photo = res.path
			}
		},
		create() {
			this.dialogType = "add"
			this.dialogVisible = true
			this.form.sendmsg = 'false'

		},
		goBack() {
			this.$router.go(-1)
		},
		getList() {
			this.tableData = []
			this.loading = true
			
			this.$axios.post('/Admin/List', {
				"PageIndex": this.page,
				"PageSize": this.pageSize,
				"Key": this.key
			}).then((res) => {
				this.loading = false
				console.log(res)
				this.tableData = res.rows;
				this.total = res.total;
			})
		},
		views(row) {
			console.log(row.id)
			this.dialogVisible1 = true
			this.$axios.get(`/Admin/Detail?Id=${row.id}`).then(res => {
				console.log(res)
				this.form = res
			})

		},
		pageChange(e) { // 页码切换事件
			this.page = e;
			this.getList()
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getList()
		},
		del(id) {
			return new Promise((resolve, reject) => {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/newsDetail/delete?Ids=' + id).then((res) => {
						this.$message.success(res.msg);
						this.getList()
						resolve()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			})

		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	padding: 20px 0 0;
}

.send {
	margin-top: 15px;
	margin-right: 10px;
}

.dialogForm {
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 50%;
		float: left;

		&.all {
			width: 100%;
		}

		.el-select {
			width: 100%;
		}
	}
}

.user-face {
	display: flex;
	align-items: center;
	position: relative;

	.male,
	.female {
		font-size: 14px;
		position: absolute;
		left: 30px;
		top: 0;
		background-color: #fff;
		height: 16px;
		width: 16px;
		line-height: 16px;
		border-radius: 6px;
	}

	.male {
		color: var(--blue);
	}

	.female {
		color: var(--pink);
	}
}
</style>
